<template>
  <div>
    <script :id="this.id" type="text/plain"></script>
  </div>
</template>
<script>
// 引入百度富文本编辑框
import '../../static/UE/ueditor.config.js'
import '../../static/UE/ueditor.all.min.js'
import '../../static/UE/lang/zh-cn/zh-cn.js'
import '../../static/UE/ueditor.parse.min.js'

// 接入秀米插件
import '../../static/UE/dialogs/xiumi/xiumi.js'
import '../../static/UE/dialogs/xiumi/xiumi.css'
export default {
  name: 'UE',
  data () {
    console.log(this.$store.state.common)
    var ueId = this.$store.state.common.ueId;
    this.$store.commit("common/updateUeId",ueId+1);
    return {
      editor: null,
      isReady: false,
      id: 'ueditor_'+ueId
    }
  },
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    },
    watchChange: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    const _this = this
    this.editor = UE.getEditor(this.id, this.config);
    this.editor.ready(function(){
      _this.editor.setContent(_this.defaultMsg||"") // 确保UE加载完成后，放入内容。
      _this.isReady= true
    })
    if (this.watchChange) {
      this.editor.addListener('contentChange', function () {
        _this.$emit('ue-change', _this.editor.getContent())
      })
    }
  },
  methods: {
    getUEContent () { // 获取内容方法
      return this.editor.getContent()
    },
    reset(){
      this.isReady && this.editor.setContent('')
    },
    setUEContent (content) {
      var _this=this;
      this.editor.ready(function () {
        _this.editor.setContent(content||'');
      })
    }
  },
  destroyed () {
    this.editor.destroy()
  }
}
</script>
